@extends('layouts.back_stage')
@section('content')
    <style>
        .info_box{width:100%;height:30px;margin-top:20px;}
        .info_box li{width:25%;float:left;height:30px;}
        .info_box li h3{display: inline;}
        .lining-btn{width:100%;height:40px;margin:30px 0;}
        .lining-btn .lining-a{width:80px;text-align:center;line-height:40px;display:block;background:#00ccff;color:#fff;float:left;margin-left:30px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
        .lining-ul{color:#383838; width:80%;height:auto;margin:0 auto;}
        .pantone{border-collapse:collapse;width:100%;font-size:14px;color:#383838;background:#fff;}
        .pantone td{text-align:center;height:35px;width: 100px;}
        table,th,td{border:1px solid #ccc;width: 100px;}
        .residueCount{width:100%;height:100%;border:0;outline:none;text-align:center;}
    </style>
    <div class="container">
        <div>
            <ul class="info_box">
                <li><h3>款号：{{ $plan_info->girard }}</h3></li>
                <li><h3>计划单号：{{ $plan_info->plan_code }}</h3></li>
                <li><h3>波段：{{ $plan_info->band_name }}</h3></li>
                <li><h3>品类：{{ $cate[$plan_info->cate_id] }}</h3></li>
            </ul>
            <ul class="info_box">
                <li><h3>投产总量：{{ $plan_info->total }}</h3></li>
                <li><h3>剩余量：{{ $plan_info->total - $plan_info->into_pur }}</h3></li>
                <li><h3>计划加工厂：{{ $plan_info->plan_factory }}</h3></li>
                <li><h3>计划出货日期：2017-10-12</h3></li>
            </ul>
        </div>
        <div class="lining-btn">
            @if(count($info) >0 )
                @foreach($info as $k=>$v)
                    <a class="lining-a" id="l{{ $v->id }}">{{ $v->color }}</a>
                @endforeach
            @endif
        </div>
        <ul class="lining-ul">
            @if(count($info) >0 )
                @foreach($info as $k=>$v)
            <li class="lining-li">
                <h3>所需面料</h3>
                <table class="pantone" border="1" cellspacing="0" cellpadding="0">
                    <tr><td>面料号</td><td>颜色</td><td>投入面料/m</td><td>剩余面料/m</td><td>操作</td></tr>
                    @foreach($details as $ds)
                        @if($v->id == $ds->product_id)
                    <tr>
                        <td class="sur_cloth_info">{{ $ds->cloth_info }}</td>
                        <td class="sur_cloth_color">{{ $ds->other_info }}</td>
                        <td class="sur_now_stock">{{ $ds->actual_need_stock }}</td>
                        <td class="sur_residue_stock"><input type="text" class="residueCount" value="{{ $ds->surplus_stock }}" placeholder="请输入剩余库存"></td>
                        <td>
                            <button class="btn btn-primary save_surface" abc="{{ $ds->id }}">保存</button>
                        </td>
                    </tr>
                        @endif
                        @endforeach

                </table>
            </li>
                @endforeach
                @endif
        </ul>
        @if($plan_info->fabric_status ==0)
        <button style="float: right;margin-right:10%;margin-top:20px;" class="btn btn-info" onclick="saveAll()">全部保存</button>
        @endif
    </div>
    <script>
        /*初始化tab切换*/
        $(".lining-a:eq(0)").css("background","#27c24c");
        $(".lining-ul .lining-li").css("display","none");
        $(".lining-ul .lining-li:eq(0)").css("display","block")
        /*点击tab切换*/
        $(".lining-btn").children(".lining-a").click(function(){
            var n=$(this).index();
            $(this).css("background","#27c24c").siblings().css("background","#00ccff");
            $(".lining-ul .lining-li").css("display","none");
            $(".lining-ul .lining-li:eq("+n+")").css("display","block")
        });
        /*保存*/
        $('.save_surface').click(function () {
            var getNowStock = $(this).parent().siblings('.sur_now_stock').text();
            var stock = $(this).parent().siblings('.sur_residue_stock').children().val();
            var id = $(this).attr('abc');
            if(stock==''){
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("剩余面料不能为空");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            if(parseInt(stock) > parseInt(getNowStock)){
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("剩余库存不能超过现有库存");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                type: 'post',
                url: '/storage/clothsStorage',
                dataType:'json',
                data:{
                    id:id,
                    stock: stock
                },
                success:function (data) {
                    if(data.success){
                        $(".faceImg").attr("src","/img/laugh.png");
                        $(".oHandle").text("保存成功");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text("保存失败");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            })
        });
        /*剩余面料*/
        $(".residueCount").bind("input","onpropertychange",function(){
            $(this).val($(this).val().replace(/[^\d]/g,""));
        });
        /*全部保存*/
        function saveAll(){
            $(".oText").text('确定保存所有信息吗？这将不可修改');
            $(".oMask").show();
            $(".oAnim").show();
            $(".oBtn0").attr('id','');
            $(".oBtn0").attr('id','oRefund');
            /*点确定*/
            $(document).on('click','#oRefund',function(){
                $(".oMask").hide();
                $(".oAnim").hide();
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    type: 'post',
                    url: '/storage/check_save_fabric',
                    data: {
                        id: $.getUrlParam('id')
                    },
                    dataType: 'json',
                    success: function (data) {
                        if(data.success){
                            $(".faceImg").attr("src","/img/laugh.png");
                            $(".oHandle").text("保存成功！");
                            $(".oSuccess").show(0).delay(1000).hide(0);
                        }else{
                            $(".faceImg").attr("src","/img/weep.png");
                            $(".oHandle").text(data.info);
                            $(".oSuccess").show(0).delay(1000).hide(0);
                        }
                    }
                });
            });
        }
    </script>
@endsection